

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface CCItemData {
  id: string;
  title: string;
  applicant: string;
  status: 'processing' | 'approved' | 'rejected';
  statusText: string;
  statusColor: string;
  initiateTime: string;
  ccTime: string;
  ccReason: string;
  processId: string;
}

interface CCItemProps {
  item: CCItemData;
  onPress: () => void;
}

const CCItem: React.FC<CCItemProps> = ({ item, onPress }) => {
  const getStatusBadgeStyle = (status: string) => {
    switch (status) {
      case 'processing':
        return styles.statusBadgeProcessing;
      case 'approved':
        return styles.statusBadgeApproved;
      case 'rejected':
        return styles.statusBadgeRejected;
      default:
        return styles.statusBadgeProcessing;
    }
  };

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <LinearGradient
        colors={['rgba(99, 102, 241, 0.1)', 'rgba(139, 92, 246, 0.1)']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.cardGradient}
      >
        <View style={styles.cardContent}>
          {/* 标题和状态 */}
          <View style={styles.header}>
            <View style={styles.titleContainer}>
              <Text style={styles.title}>{item.title}</Text>
              <View style={styles.applicantContainer}>
                <FontAwesome6
                  name="user"
                  size={12}
                  color="rgba(99, 102, 241, 0.7)"
                  style={styles.applicantIcon}
                />
                <Text style={styles.applicant}>申请人：{item.applicant}</Text>
              </View>
            </View>
            <View style={[styles.statusBadge, getStatusBadgeStyle(item.status)]}>
              <Text style={styles.statusText}>{item.statusText}</Text>
            </View>
          </View>

          {/* 时间信息 */}
          <View style={styles.timeContainer}>
            <View style={styles.timeItem}>
              <FontAwesome6
                name="clock"
                size={12}
                color="rgba(6, 182, 212, 0.7)"
                style={styles.timeIcon}
              />
              <Text style={styles.timeText}>发起时间：{item.initiateTime}</Text>
            </View>
            <View style={styles.timeItem}>
              <FontAwesome6
                name="share-nodes"
                size={12}
                color="rgba(139, 92, 246, 0.7)"
                style={styles.timeIcon}
              />
              <Text style={styles.timeText}>抄送时间：{item.ccTime}</Text>
            </View>
          </View>

          {/* 抄送原因 */}
          <View style={styles.reasonContainer}>
            <FontAwesome6
              name="circle-info"
              size={12}
              color="rgba(99, 102, 241, 0.7)"
              style={styles.reasonIcon}
            />
            <Text style={styles.reasonText}>抄送原因：{item.ccReason}</Text>
          </View>
        </View>
      </LinearGradient>
    </TouchableOpacity>
  );
};

export default CCItem;

